<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>课程表</title>
    <div id="app">
      <table cellpadding="10" cellspacing="0" border="1">
        <tr>
          <td width="200px">学号</td>
          <td width="200px">姓名</td>
          <td width="200px">新增时间</td>
          <td width="200px">操作</td>
        </tr>
        <tr v-for="(item,i) in list" :key="i">
          <td width="200px">{{item.id}}</td>
          <td width="200px">{{item.name}}</td>
          <td width="200px">{{item.time}}</td>
          <td>
          <button width="100px" @ click="del(item)">删除</button>
          </td>
        </tr>
        <tr>
          <td>
            <input type="text" placeholder="请输入学号" v-model="newid">
          </td>
          <td>
            <input type="text" placeholder="请输入姓名" v-model="newName">
          </td>
          <td><button @click="eventNew">新增</button></td>
        </tr>
        <tr>
        <td>
          <input type="text" v-model="searchName" placeholder="请输入要搜索的姓名">
        </td>
        <td><button @click="search">搜索</button></td>
        </tr>
      </table>
    </div>
    </head>
  <body>
  </body>
  <script src="vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        list: [{
          id: 1,
          name: '小王',
          time: '2023年2月23日19:08:18'
        }, {
          id: 2,
          name: '小刘',
          time: '2023年2月23日19:09:02'
        }, {
          id: 3,
          name: '小刚',
          time: '2023年2月23日19:26:31'
        }],
        newid: null,
        newName: null,
        searchName:null
      },
      methods: {
        eventNew() {
          let obj = {
            id: this.newid,
            name: this.newName,
            time: new Date()
          }
          this.list.push(obj);
        },
        del(e) {
      
          let newArr =this.list.filter(item=>{
            if(item.id !=e.id){
              return item
            }
          })
          this.list =newArr;
        },
        search(){
          let newArr =this.list.filter(item=>{
            if(item.name ==this.searchName){
              return item
            }
          })
          this.list =newArr;
        }
      }
    })
  </script>
</html>
